# Component: Language Select

Localization switcher with responsive iconography

Navigation Block

### BEM Anatomy

| Type      | Class Name                | Description                                                                        |
| --------- | ------------------------- | ---------------------------------------------------------------------------------- |
| ==Block== | `.as-language-select`     | The `<li>` container. Forces `white-space: nowrap` for flag/text alignment.        |
| Element   | `__button`                | The dropdown toggle. Features a breakpoint-specific span toggle.                   |
| Element   | `__dropdown`              | The `.dropdown-menu` wrapper containing the culture list.                          |
| Element   | `__dropdown-item`         | Individual language link. Enforces `text-transform: capitalize`.                   |
| Modifier  | `__dropdown-item--active` | Highlights the currently selected thread culture using Bootstrap active variables. |

### Responsive Logic

This component uses a mobile-first approach to labels. On small devices, the "Language" text is visible; from the `md` breakpoint up, the text is hidden, leaving only the flag icon to save navigation space.

##### Generated HTML (Active State)

```html
<li class="as-language-select dropdown">
    <a class="as-language-select__button nav-link dropdown-toggle" ...>
        <i class="fi fis fi-current"></i>
        <span>Language</span>
    </a>
    <ul class="as-language-select__dropdown dropdown-menu">
        <li>
            <a class="as-language-select__dropdown-item--active dropdown-item">
                <i class="fi fis fi-gb"></i>
                <span>English</span>
            </a>
        </li>
    </ul>
</li>
```

##### SCSS

```scss
.as-language-select {
  &__button {
    color: var(--bs-white);
    
    // Hide text label on Desktop
    @include media-breakpoint-up(md) {
      span {
        display: none;
      }
    }
  }

  &__dropdown-item {
    text-transform: capitalize;
  }
}
```
